<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>学生信息管理</title>
    <link rel="stylesheet" href="css/index.css" />
  </head>

  <body>
    <h1>新增学员</h1>
    <form class="info" autocomplete="off">
      姓名：<input type="text" class="uname" name="uname" /> 年龄：<input
        type="text"
        class="age"
        name="age"
      />
      性别:
      <select name="gender" class="gender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
      薪资：<input type="text" class="salary" name="salary" /> 就业城市：<select
        name="city"
        class="city"
      >
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
        <option value="曹县">曹县</option>
      </select>
      <button class="add">录入</button>
    </form>

    <h1>就业榜</h1>
    <table>
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>薪资</th>
          <th>就业城市</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- 
        <tr>
          <td>1001</td>
          <td>欧阳霸天</td>
          <td>19</td>
          <td>男</td>
          <td>15000</td>
          <td>上海</td>
          <td>
            <a href="javascript:">删除</a>
          </td>
        </tr> 
        -->
      </tbody>
    </table>
    <script>
      // 参考数据
      // const initData = [
      //   {
      //     stuId: 1001,
      //     uname: '欧阳霸天',
      //     age: 19,
      //     gender: '男',
      //     salary: '20000',
      //     city: '上海',
      //   }
      // ]
      // 1.获取表单元素
      const info = document.querySelector('.info')
      // 获取每个参数的元素
      const uname = document.querySelector('.uname')
      const age = document.querySelector('.age')
      const gender = document.querySelector('.gender')
      const salary = document.querySelector('.salary')
      const city = document.querySelector('.uname')
      const itmes = document.querySelectorAll('.info [name]')
      const tbody = document.querySelector('tbody')
      console.log(itmes)
      // 封装函数
      function render() {
        // 清空tbody的内容
        tbody.innerHTML = ''
        // 把数组中的数据添加到表格中
        for (let i = 0; i < initData.length; i++) {
          // 创建元素tr
          const tr = document.createElement('tr')
          tr.innerHTML = `
          <td>${initData[i].stuId}</td>
          <td>${initData[i].uname}</td>
          <td>${initData[i].age}</td>
          <td>${initData[i].gender}</td>
          <td>${initData[i].salar}</td>
          <td>${initData[i].city}</td>
          <td>
            <a href="javascript:" data-id=${i}>删除</a>
          </td>`

          // 向tbody中追加tr
          tbody.appendChild(tr)
        }
      }
      // 4.初始化页面从localStorage中取数据
      let initData = 
        JSON.parse(localStorage.getItem('formData')) === null
          ? []
          : JSON.parse(localStorage.getItem('formData'))
        console.log(initData);
      render()
      // 2.给info表单添加提交事件
      info.addEventListener('submit', function (e) {
        // 3.阻止表单的默认提交，
        e.preventDefault()
        // 判断表单内容不为空，如果为空退出事件
        for (let i = 0; i <= itmes.length - 1; i++) {
          if (itmes[i].value === '') {
            alert('表单内容不能为空')
            return
          }
        }
        // 获取参数的值
        const obj = {
          stuId: initData.length + 1,
          uname: uname.value,
          age: age.value,
          gender: gender.value,
          salar: salary.value,
          city: city.value,
        }

        // 将数据变成对象添加到数组中
        initData.push(obj)
        console.log(initData)
        // 将数组转成json格式存入localStorage
        localStorage.setItem('formData', JSON.stringify(initData))
        console.log(localStorage.setItem('formData', JSON.stringify(initData)))
        // 再从localStorage中拿出
        initData = JSON.parse(localStorage.getItem('formData'))
        console.log((initData = JSON.parse(localStorage.getItem('formData'))))
        // 清空输入框
        info.reset()
        render()
      })
      // console.log(JSON.parse(localStorage.getItem('formData')));
      // 给tbody添加事件委托
      tbody.addEventListener('click', function (e) {
        // 判断当点到A标签时事件生效
        if (e.target.tagName === 'A') {
          const index = e.target.dataset.id
          initData.splice(index, 1)
          // 修改数组后再次存入localStorage，实现修改localStorage的内容
          localStorage.setItem('formData', JSON.stringify(initData))
          render()
        }
      })
    </script>
  </body>
</html>
